<template>
	<view class="user-page">
		<!-- #ifdef APP -->
		<u-navbar  title="编辑资料" :autoBack="true" :placeholder="true">></u-navbar>
		<!-- #endif -->
		<view class="contentBox" v-if="userInfo">
			<view class="image-box">
				<view class="title">头像</view>
				<view class="upload-box">
					<image :src="$OssUrl(userInfo.avatar)" class="image"></image>
				</view>
			</view>
			<view class="image-box">
				<view class="title">相册</view>
				<view class="image-list">
					<view class="upload-box" v-for="(item,index) in userInfo.images" :key="index">
						<image src="../../static/common/icon_delete.png" class="delete"
							@click="deleteUserImage(item.id,'1')"></image>
						<image :src="item.data" class="image" mode="aspectFill"></image>
					</view>
					<view class="upload-box" @click="chooseImage">
						<image src="../../static/common/icon_upload.png" class="image"></image>
					</view>
				</view>
			</view>
			<view class="image-box">
				<view class="title">视频</view>
				<view class="image-list">
					<view class="upload-box" v-for="(item,index) in userInfo.videos" :key="index">
						<image src="../../static/common/icon_delete.png" class="delete"
							@click="deleteUserImage(item.id,'2')"></image>
						<video :src="item.data" class="image"></video>
					</view>
					<view class="upload-box" @click="chooseVideo">
						<image src="../../static/common/icon_upload.png" class="image"></image>
					</view>
				</view>
			</view>
			<view class="image-box" v-if="userInfo.gender==2">
				<view class="title">我的联系方式</view>
				<view class="wechat-box" @click="$Tips('/pages/mine/add-contact')">
					<view class="wechat-top">
						<view style="display: flex;align-items: center;">
							<image src="../../static/user/icon_wx.png" class="icon-image" mode=""></image>
							<span>微信号</span>
						</view>
						<view style="color: #9A9A9A;">仅付费用户可见</view>
					</view>
					<view class="wechat-bottom">
						<view>留下微信，找到你更方便</view>
						<image src="../../static/user/icon_add.png" class="icon-image" mode=""></image>
					</view>
				</view>
			</view>
			<view class="content-box">
				<view class="title">基本信息</view>
				<view class="menu-list">
					<view class="menu-item" @click="submitUserInfo('请输入昵称','nickname')">
						<text class="menu-text">昵称</text>
						<text class="menu-value">{{userInfo.nickname}}</text>
						<u-icon name="arrow-right" size="16" color="#999"></u-icon>
					</view>
					<view class="menu-item menu-disabled">
						<text class="menu-text">性别</text>
						<text class="menu-value">{{userInfo.gender==1?'男':'女'}}</text>
						<view></view>
					</view>
					<view class="menu-item" @click="submitUserInfo('请输入年龄','age')">
						<text class="menu-text">年龄</text>
						<text class="menu-value">{{userInfo.age}}</text>
						<u-icon name="arrow-right" size="16" color="#999"></u-icon>
					</view>
					<view class="menu-item" @click="submitUserInfo('请输入身高','height')">
						<text class="menu-text">身高</text>
						<text class="menu-value" v-if="userInfo.height">{{userInfo.height}}</text>
						<text class="menu-value no-value" v-else>待填写</text>
						<u-icon name="arrow-right" size="16" color="#999"></u-icon>
					</view>
					<view class="menu-item" @click="submitUserInfo('请输入体重','weight')">
						<text class="menu-text">体重</text>
						<text class="menu-value" v-if="userInfo.weight">{{userInfo.weight}}</text>
						<text class="menu-value no-value" v-else>待填写</text>
						<u-icon name="arrow-right" size="16" color="#999"></u-icon>
					</view>
					<view class="menu-item" @click="showArea=true">
						<text class="menu-text">常驻城市</text>
						<text class="menu-value">{{userInfo.city}}</text>
						<u-icon name="arrow-right" size="16" color="#999"></u-icon>
					</view>
					<view class="menu-item" @click="showWork=true">
						<text class="menu-text">职业</text>
						<text class="menu-value" v-if="userInfo.work">{{userInfo.work}}</text>
						<text class="menu-value no-value" v-else>待填写</text>
						<u-icon name="arrow-right" size="16" color="#999"></u-icon>
					</view>
				</view>
			</view>
			<view class="content-box">
				<view class="title">个人介绍</view>
				<view style="flex: 1;">
					<u-textarea v-model="userInfo.person_desc" placeholder="随便写点吧…" :clearable="true" border="none" confirmType="done" style="background-color:#F7F7F7;"></u-textarea>
				</view>
			</view>
			<view class="button-group">
				<view class="button1" @click="$u.throttle(updateUserInfo,2000)">保存</view>
			</view>
		</view>
		<u-picker
			:show="showArea"
			ref="uPicker"
			cancelText=""
			:defaultIndex="areaIndex"
			:columns="columns"
			@confirm="confirmArea"
			@close="showArea =false"
			:closeOnClickOverlay="true"
			@change="changeHandler">
		</u-picker>
		<u-picker
			:show="showWork"
			:columns="workColumns"
			cancelText=""
			@close="showWork =false"
			:closeOnClickOverlay="true"
			@confirm="confirmWork">
		</u-picker>
		<view style="height: 20rpx;"></view>
	</view>
</template>

<script>
	import uploadImage from '@/components/UploadImage.vue';
	export default {
		data() {
			return {
				userInfo: null,
				images: '',
				showWork: false,
				workColumns: [
					['影视/娱乐', '文化/艺术', '金融/投资', 'IT/互联网', '健身/美容', '媒体/公关', '商业/零售', '工业/制造业', '教育/科研', '自由职业者', '模特', '学生', '其他']
				],
				showArea: false,
				areaIndex: [0, 0],
				columns: [
					[],
					[]
				],
				columnData: [
					[],
					[]
				],
			}
		},
		components: {
			uploadImage: uploadImage
		},
		onLoad(options) {
			this.getUserInfo()
		},
		methods: {
			deleteUserImage(id, type) {
				let that = this
				uni.showModal({
					content: type == 1 ? "是否删除相册的这张照片" : "是否删除此条视频",
					success(res) {
						if (res.confirm) {
							that.$Api['user'].updateUserImage({
								id: id,
								type: type,
							}).then(res => {
								that.getUserInfo()
							})
						}
					}
				})
			},
			chooseVideo() {
				let that = this
				uni.chooseVideo({
					count: 1, //默认9
					mediaType: ['video'],
					sourceType: ['camera', 'album'],
					success: async function(res) {
						const result = await that.$uploadFilePromise(res.tempFilePath)
						if (result) {
							that.updateUserImage(result.url, '2')
						}
					}
				});
			},
			chooseImage() {
				let that = this
				uni.chooseImage({
					count: 5, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: async function(res) {
						for (var i = 0; i < res.tempFilePaths.length; i++) {
							const result = await that.$uploadFilePromise(res.tempFilePaths[i])
							if (result) {
								that.updateUserImage(result.url, '1')
							}
						}
					}
				});
			},
			updateUserImage(url, type) {
				this.$Api['user'].updateUserImage({
					data: url,
					type: type,
				}).then(res => {
					this.getUserInfo()
				})
			},
			submitUserInfo(name, type) {
				let that = this
				uni.showModal({
					title: name,
					editable: true,
					success(res) {
						if (res.confirm && res.content != '') {
							that.userInfo[type] = res.content
						}
					}
				})
			},
			getUserInfo() {
				this.$Api['user'].getUserInfo().then(res => {
					this.userInfo = res.data
					this.getAreaTree()
				})
			},
			updateUserInfo() {
				this.$Api['user'].updateUserInfo({
					nickname: this.userInfo.nickname,
					age: this.userInfo.age,
					height: this.userInfo.height,
					weight: this.userInfo.weight,
					work: this.userInfo.work,
					city: this.userInfo.city,
					person_desc: this.userInfo.person_desc,
				}).then(res => {
					this.$Tips({
						title: '保存成功'
					}, {
						tab: 3,
						url: '1'
					})
				})
			},
			uploadSuccess(e) {
				this.images = e.fileList
			},
			//获取城市信息，并赋值默认值
			getAreaTree() {
				this.$Api['common'].getAreaTree().then(res => {
					this.columnData = this.extractChildNames(res.data)
					let areaIndex = this.findCityIndex(this.userInfo.city, this.columnData)
					if (Array.isArray(res.data) && res.data.length > 0 && Array.isArray(res.data[0].childlist)) {
						const columns = [
							res.data.map(item => item.name),
							res.data[areaIndex[0]].childlist.map(item => item.name)
						];
						this.columns = [...columns];
					} else {
						console.error('Invalid data structure');
						// 或者根据需要设置默认值给 this.columns
						this.columns = [
							[],
							[]
						];
					}
					this.areaIndex = areaIndex
				})
			},
			//根据城市名称查询索引
			findCityIndex(cityName, cities) {
				for (let i = 0; i < cities.length; i++) {
					let row = cities[i];
					for (let j = 0; j < row.length; j++) {
						if (row[j] === cityName) {
							return [i, j]; // 返回行和列的索引
						}
					}
				}
				return null; // 如果没有找到市区，返回null
			},
			//格式化城市信息
			extractChildNames(data) {
				return data.map(item => {
					// 如果 childlist 存在且不为空，则提取所有城市的 name 属性
					if (item.childlist && item.childlist.length > 0) {
						return item.childlist.map(child => child.name);
					} else {
						// 否则返回一个空数组
						return [];
					}
				});
			},
			//修改选择的城市
			changeHandler(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					picker = this.$refs.uPicker
				} = e
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
					// picker为选择器this实例，变化第二列对应的选项
					picker.setColumnValues(1, this.columnData[index])
				}
			},
			//确认选择的城市
			confirmArea(e) {
				this.userInfo.city = e.value[1]
				this.showArea = false
			},
			//确认职业
			confirmWork(e) {
				this.userInfo.work = e.value[0]
				this.showWork = false
			},
		}
	}
</script>

<style lang="less" scoped>
	.user-page {
		width: 100%;
		min-height: 100vh;
		background-color: #f7f8fa;
		position: relative;

		.contentBox {
			min-height: 80vh;
			margin: 20rpx 34rpx;
			padding: 38rpx 40rpx 38rpx;
			box-shadow: 0rpx 4rpx 32rpx 0rpx #FFF0FD;
			border-radius: 32rpx;
			background: linear-gradient(180deg, #FFDAF5 0%, #FFFFFF 5%);

			.content-box,
			.image-box {
				margin-top: 40rpx;

				.title {
					font-size: 28rpx;
					margin: 42rpx 0 20rpx;
				}

				::v-deep .u-textarea {
					background-color: #EFEFEF;
				}
			}

			.image-list {
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				grid-auto-flow: row;
				grid-gap: 20rpx;
			}

			.upload-box {
				width: 208rpx;
				height: 208rpx;
				position: relative;
				border-radius: 16rpx;

				.delete {
					width: 32rpx;
					height: 32rpx;
					position: absolute;
					right: 0;
					top: 0;
					z-index: 10;
				}

				.image {
					width: 208rpx;
					height: 208rpx;
					border-radius: 16rpx;
				}
			}

			.wechat-box {
				margin-top: 30rpx;
				background: #F7F7F7;
				border-radius: 16rpx;
				padding: 24rpx 36rpx;

				.wechat-top {
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 28rpx;
					color: #323334;

					.icon-image {
						width: 32rpx;
						height: 32rpx;
						margin-right: 6rpx;
					}
				}

				.wechat-bottom {
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 28rpx;
					color: #323334;
					padding: 26rpx 20rpx;
					background: #ffecfd;
					border-radius: 16rpx;
					margin-top: 28rpx;
					font-size: 26rpx;
					color: #F169F6;

					.icon-image {
						width: 28rpx;
						height: 28rpx;
					}
				}
			}

			.menu-list {
				margin-top: 30rpx;
				background: #F7F7F7;
				border-radius: 16rpx;

				.menu-item {
					display: flex;
					align-items: center;
					padding: 24rpx  22rpx 24rpx 36rpx;
					font-size: 28rpx;

					.menu-text {
						flex: 1;
						font-size: 28rpx;
					}

					.menu-value {
						margin-right: 10rpx;
					}

					.no-value {
						color: #F169F6;
					}
				}

				.menu-disabled {
					color: #9A9A9A !important;
				}
			}

			.button-group {
				.button1 {
					margin: 160rpx auto 0;
					width: 628rpx;
					height: 88rpx;
					font-weight: bold;
					font-size: 30rpx;
					color: #FFFFFF;
					text-align: center;
					line-height: 88rpx;
					background: linear-gradient(135deg, #FE93BF 0%, #A27AFF 100%);
					box-shadow: 0rpx 4rpx 10rpx 0rpx #FDC4FF;
					border-radius: 44rpx;
				}
			}
		}
	}
</style>